<script setup lang="ts">
import MenuTree from "@/views/MenuTree.vue";
import {useRouter} from 'vue-router'

const router = useRouter()

let m: any[] = [
    {
        path: '/reg',
        name: 'reg',
        meta: {
            title: '注册',
            icon: 'Aim'
        },
        component: 'Reg'
    }, {
        path: '/login',
        name: 'login',
        meta: {
            title: '登录',
            icon: 'Aim'
        },
        component: 'Login'
    }, {
        path: '/goods',
        name: 'goods',
        meta: {
            title: '商品管理',
            icon: 'User'
        },
        children: [
            {
                path: '/goods/add',
                name: 'goodsadd',
                meta: {
                    title: '商品添加',
                    icon: 'Clock'
                },
                component: 'GoodsAdd'
            }, {
                path: '/goods/delete',
                name: 'goodsdelete',
                meta: {
                    title: '商品删除',
                    icon: 'Connection'
                },
                component: 'GoodsDelete'
            }, {
                path: '/goods/manager',
                name: 'goodsmanager',
                meta: {
                    title: '管理商品',
                    icon: 'Setting'
                },
                children: [
                    {
                        path: '/goods/manager/m1',
                        name: 'm1',
                        meta: {
                            title: '管理商品1',
                            icon: 'Lock'
                        },
                        component: 'gmanagerm1'
                    }, {
                        path: '/goods/manager/m2',
                        name: 'm2',
                        meta: {
                            title: '管理商品2',
                            icon: 'Bell'
                        },
                        component: 'gmanagerm2'
                    }, {
                        path: '/goods/manager/m3',
                        name: 'm3',
                        meta: {
                            title: '管理商品3',
                            icon: 'Star'
                        },
                        component: 'gmanagerm3'
                    }, {
                        path: '/goods/manager/m4',
                        name: 'm4',
                        meta: {
                            title: '管理商品4',
                            icon: 'Aim'
                        },
                        component: 'gmanagerm1'
                    },
                ]
            }
        ]
    }
]

const vs = import.meta.glob("/src/views/**/**.vue")

const addChildren = (parent: any, m: any) => {
    m.forEach((m: any) => {
        let route = m
        if (m.children && m.children.length > 0) {
            route = addChildren(route, m.children)
        } else {
            let path = `/src/views/${m.component}.vue`
            //m.component = () => import(path)
            route.component = vs[path]
        }
        parent.children.push(route)
    })
    return parent
}

const add = (m: any) => {
    m.forEach((m: any) => {
        let route = m
        if (m.children && m.children.length > 0) {
            //route = addChildren(route, m.children)
            add(m.children)
        } else {
            let path = `/src/views/${m.component}.vue`
            route.component = vs[path]
        }
        router.addRoute(route)
    })
}


//动态增加一个路由
// let m1 = {
//     path:'/login',
//     name:'login',
//     meta:{title:'登录',icon:'Menu'},
// }
// router.addRoute(m1)

// let m1 = {
//     path: '/login',
//     name: 'login',
//     meta: {title: '登录', icon: 'Menu'},
//     children: [
//         {
//             path: '/login1',
//             name: 'login1',
//             meta: {title: '登录1', icon: 'Menu'},
//             component: {}
//         }, {
//             path: '/login2',
//             name: 'login2',
//             meta: {title: '登录2', icon: 'Menu'},
//             component: {}
//         }
//     ]
// }
//router.addRoute(m1)

//console.log(router.getRoutes())
//console.log(router.options.routes)

//将数组m 转换为路由并添加到router.add()
add(m)

//将系统的静态路由添加到m数组，el-menu 循环m数组，生成左侧菜单 el-menu 必须有一个router属性 每一人菜单项有一个:index
m.unshift(...router.options.routes)
</script>

<template>
    <el-container class="layout">
        <el-aside width="200px">
            <!-- 左侧导航 -->
            <el-scrollbar>
                <el-menu style="height: 100vh;"
                         active-text-color="#ffd04b"
                         background-color="#545c64"
                         class="el-menu-vertical-demo"
                         default-active="2"
                         text-color="#fff"
                         router>
                    <menu-tree :menu="m"/>
                </el-menu>
            </el-scrollbar>
            <!-- 左侧导航 结束 -->
        </el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>

</template>

<style scoped>
.layout {
    height: 100vh;
}

.layout .el-aside {
    transition: width .3s ease-out;
}
</style>
